<template>
  <view class="container">
    <u-navbar :is-back="true" title="歌单" :border-bottom="false" :custom-back="true" @back="goBack" />
    <view class="playlist-info">
      <image :src="playlist.cover" class="playlist-cover" />
      <view class="playlist-title">{{ playlist.title }}</view>
    </view>
    <view v-for="song in playlistSongs" :key="song.id" class="song-item">
      <image :src="song.cover" class="song-cover" />
      <view class="song-info">
        <view class="song-title">{{ song.title }}</view>
        <view class="song-artist">{{ song.artist }}</view>
      </view>
      <u-button type="primary" size="mini" @click="orderSong(song)">点歌</u-button>
      <u-button type="warning" size="mini" @click="favoriteSong(song)">收藏</u-button>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      playlist: { title: '酒馆歌单', cover: '/static/song/1.jpg' },
      playlistSongs: [
        { id: 1, title: '四季歌', artist: '邓丽君', cover: '/static/song/1.jpg' }
      ]
    }
  },
  methods: {
    goBack() { uni.navigateBack() },
    orderSong(song) {
      uni.showToast({ title: `已点：${song.title}`, icon: 'success' })
    },
    favoriteSong(song) {
      uni.showToast({ title: `已收藏：${song.title}`, icon: 'success' })
    }
  }
}
</script>
<style scoped>
.container { padding: 20rpx; }
.playlist-info { display: flex; align-items: center; margin-bottom: 30rpx; }
.playlist-cover { width: 100rpx; height: 100rpx; border-radius: 16rpx; }
.playlist-title { font-size: 32rpx; font-weight: bold; margin-left: 20rpx; }
.song-item { display: flex; align-items: center; margin-bottom: 30rpx; background: #181820; border-radius: 16rpx; padding: 20rpx; }
.song-cover { width: 80rpx; height: 80rpx; border-radius: 12rpx; }
.song-info { flex: 1; margin-left: 20rpx; }
.song-title { font-size: 30rpx; font-weight: bold; }
.song-artist { font-size: 24rpx; color: #bfcfff; margin-top: 4rpx; }
</style> 